<template>
  <div class="container">
    <div class="main">
      <div id="printMe" class="printMe" v-loading="loading">
        <div class="print-page" v-for="item in orderInfoList" :key="item.id">
          <el-descriptions :column="3" size="default">
            <el-descriptions-item label="订单编号">{{ item.order_no }}</el-descriptions-item>
            <el-descriptions-item label="下单人">{{ item.user_name }}</el-descriptions-item>
            <el-descriptions-item label="联系号码">{{ item.mobile }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ item.create_time }}</el-descriptions-item>
            <el-descriptions-item label="配送方式" contentClassName="font-size--bold">{{ item.deliveryName }}</el-descriptions-item>
            <el-descriptions-item label="业务员" v-if="item.delivery_type === 'salesmanDistribution'">{{ item.staff_info?.staff_name }}</el-descriptions-item>
          </el-descriptions>

          <el-descriptions :column="1" size="default">
            <el-descriptions-item label="联系地址" v-if="item.delivery_type !== 'storePickup'">{{ item.address }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1" size="default">
            <el-descriptions-item label="买家备注" v-if="item.buyer_remark !== ''">{{ item.buyer_remark }}</el-descriptions-item>
            <el-descriptions-item label="商家备注" v-if="item.seller_remark !== ''">{{ item.seller_remark }}</el-descriptions-item>
          </el-descriptions>
          <!-- <div class="w-title">商品信息</div> -->

          <table ref="printId" id="printId" cellspacing="0" cellpadding="0" border="0">
            <thead>
              <tr>
                <td width="10%">货号</td>
                <td width="40%">商品名称</td>
                <td width="20%">规格</td>
                <td width="10%">单价</td>
                <td width="10%">数量</td>
                <td width="10%">金额</td>
              </tr>
            </thead>
            <tbody v-if="item.goods.length">
              <tr v-for="(_item, index) in item.goods" :key="index">
                <td>{{ _item.goods_no }}</td>
                <td>{{ _item.goods_name }}</td>
                <td>{{ _item.sku_name }}</td>
                <td>{{ _item.goods_price }}元</td>
                <td>{{ _item.num }}件</td>
                <td>{{ _item.total_price }}元</td>
              </tr>
            </tbody>
          </table>
          <div v-if="!item.goods.length" class="table-empty">
            <span class="table-empty-text">暂无数据</span>
          </div>
          <div></div>
          <div>商品总价:{{ item.goods_price }}元</div>
          <div class="print-time">
            <div>配（__________）验（__________）</div>
            <div class="time">打印时间：{{ newDate }}</div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
      <div class="footer-center">
        <el-button :disabled="disabledbtn" @click="cancelSubmit">返 回</el-button>
        <!-- <el-button type="primary"
                         :disabled="disabledbtn"
                         @click="handleToOrderDetail">查看订单
              </el-button> -->
        <el-button type="primary" :disabled="disabledbtn" v-print="printObj" v-permission="'print'" @click="handlePrint">打 印</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IId, IIds } from "@/types/common";
import { useState } from "@/hooks/useState.ts";
import type { IMallOrderPrintDetailVO, IprintObj } from "@/types/redPacketMallManage/mallOrder";
import { getMallOrderPrintInfo, putMallHasPrintInfo } from "@/utils/api/mallOrder";
import { dateFormatYMDHMS } from "@/utils/utils";
const { disabledbtn, loading, toggleState } = useState();
interface Props {
  ids: Array<number>;
}
const { ids } = defineProps<Props>();

const emit = defineEmits<{
  handleInitData: [];
  handleSucceedPrint: [id: number[]];
}>();

const selectId = ref<number[]>([]);
const newDate = ref<string>("");
const orderInfoList = ref<IMallOrderPrintDetailVO[]>([]);
const printObj = ref<IprintObj>({
  id: "printMe",
  popTitle: "打印订单",
  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style>  #printMe { width: 100%;!important;  } <style>'
});

/*  */
watch(
  () => ids,
  newValue => {
    if (newValue.length == 0) {
      /* 初始化数据 */
      handleInitData();
    } else {
      selectId.value = newValue;
      newDate.value = dateFormatYMDHMS(new Date().getTime());
      handleGetMallOrderByIdInfo(ids);
    }
  }
);

/* 初始化数据 */
function handleInitData() {
  selectId.value = [];
  orderInfoList.value = [];
}
/* 获取订单详情数据 */
function handleGetMallOrderByIdInfo(ids: number[]) {
  toggleState(true);
  getMallOrderPrintInfo<Array<IMallOrderPrintDetailVO>, IIds>({ ids })
    .then(res => {
      orderInfoList.value = res.result;
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
/* 保存或编辑 取消提交 */
function cancelSubmit() {
  // clearData();
  // activeName = "one";
  emit("handleInitData");
}

/* 打印成功 */
function handlePrint() {
  toggleState(true);
  putMallHasPrintInfo<unknown, IId>({ id: ids })
    .then(() => {
      emit("handleSucceedPrint", selectId.value);
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
</script>

<style lang="scss" scoped>
/* 打印订单 start */
.main {
  width: 900px;
  margin: 0 auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.w-title {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.remark {
  margin-top: 20px;
  font-size: 16px;
  color: #000;
}
.print-time {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  color: #000;
  .time {
    margin-right: 30px;
  }
}

table {
  // font-family: Arial, sans-serif;
  font-size: 14px;
  background-color: #f0f2f5;
  border-collapse: collapse;
  color: #000;
  table-layout: auto;
  width: 100%;
  text-align: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
  thead {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000;
    line-height: 40px;
    font-weight: bold;
    color: #000;
  }
  tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000;
    line-height: 18px;
    .text-align--right {
      text-align: right;
    }
    .w20 {
      width: 10px;
    }
  }
  td {
    // width: 25%;
    // padding: 5px 5px;
    font-size: 12px;
    text-align: left;
    word-break: break-all; // 元素换行
    .text-align--right {
      text-align: right;
    }
    .w20 {
      width: 10px;
    }
  }
  // 斑马纹效果stripe
  tr:nth-child(even) {
    background: #f5f7f9;
  }
  tr:nth-child(odd) {
    background: #fff;
  }
}
.table-empty {
  min-height: 60px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  .table-empty-text {
    line-height: 60px;
    width: 50%;
    color: #909399;
  }
}
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}
/* end */
@media print {
  #printMe {
    overflow: hidden;
  }
}
</style>

<style media="print" lang="scss">
@media print {
  @page {
    size: auto;
    margin: 10mm;
  }
  body {
    height: auto;
  }
  .print-page {
    position: relative;
    page-break-after: always;
  }
}
</style>
